﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                projection: 'EPSG:4326',
                // comment the following two lines to have the mouse position
                // be placed within the map.
                className: 'custom-mouse-position',
                target: document.getElementById('mouse-position'),
                undefinedHTML: '&nbsp;'
            });

            var map = initMap({
                controls: ol.control.defaults({
                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                        collapsible: false
                    })
                }).extend([mousePositionControl])
            });

            var projectionSelect = document.getElementById('projection');
            projectionSelect.addEventListener('change', function (event) {
                mousePositionControl.setProjection(ol.proj.get(event.target.value));
            });
        }


    </script>
</head>
<body>
    <div id="mouse-position"></div>
    <div class="ToolLib">
        <label><strong>选择类型:</strong> </label>
        <select id="projection" style="height: 30px;margin:7px 0px;">
            <option value="EPSG:4326">4326</option>
            <option value="EPSG:3857">3857</option>
        </select>
    </div>

    <div id="map">
    </div>
</body>
</html>
